<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>仪表管理</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="energy-mgr">
      <search-btn-view btn-text="仪表查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addEnergy">新增仪表</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="energy-mgr-table-div">
        <el-table fit stripe border class="energy-mgr-table" :data="energys" height="parent">
          <el-table-column prop="no" label="仪表编号" min-width="110px" header-align="center"></el-table-column>
          <el-table-column prop="name" label="仪表名称" min-width="110px" header-align="center"></el-table-column>
          <el-table-column prop="energyType" label="仪表类型" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('energyMgr.energyType.'+scope.row.energyType)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="示度" min-width="60px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="记录时间" width="155px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.collectTime!==''">{{moment(scope.row.collectTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="位置" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="使用状态" width="65px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`energyMgr.state.${scope.row.state}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" width="65px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`energyMgr.isAgree.${scope.row.isAgree}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="updateEnergy(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount>0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog append-to-body :close-on-click-modal="false" :title="formType==='add'?'新增仪表':'修改仪表'" :visible.sync="openForm" top="10vh" width="500px"
      @closed="formClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <energy-form v-if="openForm" :energy="selectEnergy" :type="formType" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </energy-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "./css/energyForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/imgUpload.js"
  ]);

</script>
<script src="../utils/moduleUtil.js"></script>
<script src="./searchForm.js"></script>
<script src="./energyForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        no: '',
        name: '',
        energyType: '',
        address: '',
        state: '',
        isAgree: ''
      };
      return {
        loading: false,
        energys: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        openForm: false,
        formType: '',
        selectEnergy: null,
        dropdownOption: {},
        moment: moment,
        i18n: i18n
      };
    },

    created: function () {
      this.setEnergyData(true);
    },

    methods: {
      setEnergyData: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var fields = ['no', 'name', 'energyType', 'address', 'state', 'isAgree'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        ajaxRequest('energy/getAllEnergy', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var energys = res.returnData;
          for (var i = 0; i < energys.length; i++) {
            var energy = energys[i];
            var collectTime = energy.collectTime;
            if (typeof collectTime === 'string') {
              if (collectTime !== '') {
                collectTime = Number(collectTime);
              }
            } else {
              collectTime = '';
            }
            energy.collectTime = collectTime;

            var number = energy.number;
            if (number !== null) {
              energy.number = _.round(number, 2);
            }
            if (SysUtil.isEmpty(energy.imgUrl)) {
              energy.imgUrl = '';
            }
          }
          self.energys = energys;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setEnergyData(true);
      },

      pageChange: function () {
        this.setEnergyData();
      },

      addEnergy: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateEnergy: function (energy) {
        this.formType = 'update';
        this.selectEnergy = energy;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setEnergyData();
      },

      formClosed: function () {
        this.formType = '';
        this.selectEnergy = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      EnergyForm: EnergyForm
    }
  });

</script>
<style>
  .energy-mgr {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .energy-mgr .energy-mgr-table-div {
    flex: 1;
    overflow: auto;
  }

  .search-form .el-form-item {
    margin-bottom: 10px;
  }

  .search-form .search-input {
    width: 180px;
  }

</style>

</html>
